import classnames from "classnames";
import type { HTMLAttributes } from "react";
import { createElement } from "react";
import "./index.less";

const prefixCls = "scrollbar";

export type ScrollBarProps = {
	tag?:
		| "div"
		| "ul"
		| "li"
		| "ol"
		| "a"
		| "span"
		| "dl"
		| "dt"
		| "p"
		| "main"
		| "article"
		| "aside"
		| "footer"
		| "header"
		| "nav";
	/**
	 * 滚动条的模式
	 */
	mode?: "show" | "hide" | "hover";
	/**
	 *  容器高度 默认100%
	 */
	height?: string | number;
	/**
	 * 容器最大高度
	 */
	maxHeight?: string | number;
	/**
	 *  容器样式
	 */
	style?: React.CSSProperties;
	/**
	 * 容器类名
	 */
	className?: string;
	children: React.ReactNode;
} & HTMLAttributes<HTMLDivElement>;

const ScrollBar = (props: ScrollBarProps) => {
	const { tag = "div", height = "100%", maxHeight, className, style, mode = "show", ...restProps } = props;

	const wrapperProps = {
		className: classnames([
			prefixCls,
			{
				[`${prefixCls}-hide`]: mode === "hide" ? true : false,
				[`${prefixCls}-hover`]: mode === "hover" ? true : false
			},
			className
		]),
		style: { ...style, height, maxHeight },
		...restProps
	};

	const wrapperDom = createElement(tag, wrapperProps, props?.children);

	return wrapperDom;
};

export default ScrollBar;
